<template>
	<view class="box">
		<!-- @tap="bindtap" @regionchange="regionChange" -->
		<map id="myMap" style="width: 100%;" @tap.prevent="dygao" @markertap="dygao" :enable-zoom="zoomshow"
			:enable-scroll="zoomshow" :enable-satellite="vxshow" :latitude="arrdata.latitude"
			:longitude="arrdata.longitude" :markers="markers" :circles="circles" show-location :scale="scale"></map>
		<view @click="isdiad"
			style="width: 90rpx;height: 110rpx;border-radius: 20rpx;background-color: #fff;position: absolute;right: 32rpx;top: 220rpx;z-index: 99;">
			<view v-if="!vxshow"
				style="display: flex;align-items: center;font-size: 24rpx;flex-direction: column;color: #333;margin-top: 6rpx;">
				<image style="width:60rpx;height:60rpx" src="../../static/wx.png"></image>
				<view>卫星图</view>
			</view>
			<view v-else
				style="display: flex;align-items: center;justify-content: center;font-size: 24rpx;flex-direction: column;color: #333;margin-top: 6rpx;">
				<image style="width:60rpx;height:60rpx" src="../../static/biaozhun.png"></image>
				<view>标准图</view>
			</view>
		</view>
		<view
			style="border-radius: 20px;width: 90%;height: 400rpx;background-color: rgb(255 255 255 / 75%);position: absolute;bottom: 0;left: 50%;;transform: translate(-50%,-0%);">
			<view style="width: 90%;margin: 0 auto;">
				<view style="height: 20rpx;"></view>
				<view v-if="arrdata.state==2" style="font-size: 30rpx;font-weight: 500;">位置详情：<text
						style="font-size: 28rpx;font-weight: 500;color: #333;" @click="dygao"
						:style="{filter:!show? ' blur(3px)':''}">{{arrdata.address}}</text></view>
				<view v-else style="font-size: 30rpx;font-weight: 500;">位置详情：<text
						style="font-size: 28rpx;font-weight: 500;color: #333;" @click="dygao"
						:style="{filter:!show && arrdata.stare==1? ' blur(3px)':''}">{{arrdata.address}}</text></view>
				<button v-if="!show && arrdata.state==2" @click="showVideoAd"
					style="background: #ff2353;color: #fff;margin: 20rpx 0;font-size: 32rpx;height: 80rpx;">看广告解锁导航</button>
				<button v-else-if="!show && arrdata.stare==1" @click="showVideoAd"
					style="background: #ff2353;color: #fff;margin: 20rpx 0;font-size: 32rpx;height: 80rpx;">看广告解锁导航</button>
				<button v-else style="background: #ff2353;color: #fff;margin: 20rpx 0;font-size: 32rpx;height: 80rpx;"
					@click="openMapApp">点击去导航</button>
				<view style="width: 90%;margin: 20rpx auto;">
					<view style="display: flex;justify-content: space-between;">
						<!-- <button @click="navgo" style="font-size: 28rpx;height: 70rpx;width: 260rpx;">免费抽鱼竿</button> -->
						<!-- <button @click="btn" style="font-size: 28rpx;height: 70rpx;width: 260rpx;">我也要发位置</button> -->
						<!-- <button open-type="openAwemeUserProfile" :data-aweme-id="dyid" @click="btn1" style="font-size: 28rpx;height: 70rpx;width: 260rpx;">如何查看定位</button> -->
					</view>
				</view>
				<view style="width: 90%;font-size: 24rpx;color: #333;">
					说明:为了确保定位精准性，如果手机地图软件是“百度地图请点击百度导航。其他请点击对应导航软件。
				</view>
			</view>
		</view>
		<!-- <u-popup :show="popupshow"  :customStyle="{backgroundColor: 'Transparent'}" mode="center">
			<view>
		        <view style="position: relative;width: 640rpx;height: 680rpx;background: url('https://mp-a6a84ef0-b508-435d-8a4b-c9dd12d10ee0.cdn.bspapp.com/cloudstorage/8001.png') no-repeat 0 0 / 100% 100%;">
		            <view style=" position: absolute;left: 50%;top: 72%; transform: translate(-50%, -50%);display: flex;flex-direction: column;align-items: center;">
						<image style="width: 180rpx;height: 180rpx;border-radius: 30rpx;" src="https://mp-a6a84ef0-b508-435d-8a4b-c9dd12d10ee0.cdn.bspapp.com/微信图片_20240616024705.jpg"></image>
						<view style="width: 360rpx;text-align: center;font-size: 24rpx;color:#fff;font-weight: 600;margin-top: 44rpx; 
		                  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5)">
						  达瓦莫瓦克日本进口碳素钓鱼竿手竿超轻超硬28调鲤鱼竿手杆台钓竿</view>
					</view>
		        </view>
				<view style="width: 640rpx;">
					<view @click="navActivity"  class="zoom-animation"  style="margin: 10rpx auto;text-align: center;background: url('https://mp-9b706103-a422-422f-adcb-188eb428640e.cdn.bspapp.com/Rectangle 12@3x.png')no-repeat 0 0 / 100% 100% ;width: 480rpx;height: 88rpx;text-align: center;line-height: 88rpx;font-size: 28rpx;color: #fff;font-weight: 500;">
						立即领取
					</view> 
					<view style="display: flex;justify-content: center;padding-top: 60rpx;" @click="popupshow=false">
					<u-icon color="#fff" name="close-circle" size="28"></u-icon>
					</view>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				popupshow: true,
				vxshow: true,
				arrdata: {},
				markers: [

				],
				circles: [{
					latitude: null,
					longitude: null,
					radius: 100,
				}],
				scale: 5,
				id: '68316e4bee43e346e324e45a',
				dyid: null,
				formdata: {},
				videoAd: null,
				show: false,
				zoomshow: false,
				mapCtx: null,
				region: {},
				requestStatus: false,
				interstitialAd: null

			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo']),
		},
		onLoad(opents) {
			if (opents.id) {
				this.id = opents.id
			}else{
				//测试数据
				this.id="68678ac16e5d2d42e696c968"
			}
			if (!this.isLogin) {
				this.dylogin()
			} else {
				this.getcahlist()
				this.getbiao()
			}


		},
		onReady(e) {
			this.mapCtx = tt.createMapContext("myMap");
			setTimeout(() => {
				this.bindtap()
			}, 60000)
		},
		onUnload() {
			// 页面销毁时移除对广告关闭事件的监听
			this.videoAd.offClose(this.getsde);
		},
		methods: {
			...mapMutations(['Logins']),
			dylogin() {
				uni.login({
					force: true,
					success: async (res) => {
						const {
							data: resl
						} = await this.$http.post('/login', {
							code: res.code,
							anonymous_code: res.anonymousCode
						})
						if (resl.errCode == 200) {
							uni.setStorageSync('token', resl.data)
							this.Logins(true)
							this.getcahlist()
							this.getbiao()
						}
					},
					fail(res) {
						console.log(`login 调用失败`);
					},
				})
			},
			//  regionChange(e) {
			// if(this.requestStatus){
			// 	return false;
			// }
			// this.requestStatus = true;
			// setTimeout(()=>{
			// 	if(!this.show){
			// 	 uni.showModal({
			// 	 	title: '解锁地图缩放/导航',
			// 	 	content: '探钓不易，看个广告支持一下主播吧',
			// 	 	success:  (res)=> {
			// 	 		if (res.confirm) {
			// 	 			this.showVideoAd()
			// 	 		} else if (res.cancel) {
			// 				this.scale=5
			// 				this.requestStatus=true
			// 				this.mapCtx.moveToLocation({
			// 				      success(res) {
			// 				        console.log('move 成功: ', res);
			// 				}

			// 			});
			// 	 		}
			// 	 	}
			// 	 });

			// 	}
			// 	this.requestStatus = false;
			// }, 1000);


			//   },
			navgo() {
				uni.navigateTo({
					url: '/pages/video/video'
				})
			},
			dygao() {
				if (this.show) {
					return true
				}
				if (!this.show) {
					// uni.showModal({
					// 	title: '解锁地图缩放/导航',
					// 	content: '博主不易，看个广告支持下达人，立即解锁导航！',
					// 	success: (res) =>{
					// 		if (res.confirm) {
					// 			this.showVideoAd()
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}
					// 	}
					// });
				}
			},
			bindListener() {
				this.videoAd.onLoad(() => {
					console.log("拉取广告素材成功");

				});

				this.videoAd.onClose(this.getsde);
				this.videoAd.onError(error => {
					console.log("errorCode: " + error.code);
					console.log("errMsg: " + error.errMsg);
				});
			},
			async getsde(res) {
				if (res.isEnded) {
					const {
						data: res
					} = await this.$http.post('/nav/addprice', {
						id: this.id,
						uid: this.arrdata.uid
					})
					this.scale = 15
					this.show = true
					this.zoomshow = true
					this.popupshow = true
					this.followAwemeUser()
					this.videoAd.offClose(this.getsde);
					// 执行函数
				} else {
					console.log("未观看完视频");
					this.videoAd.offClose(this.getsde);
				}
			},
			showVideoAd() {
				// 绑定事件监听
				if (this.requestStatus) {
					// 利用 return 终止函数继续运行
					return false;
				}
				// 执行函数
				this.requestStatus = true;
				setTimeout(() => {
					this.bindListener();
					this.requestStatus = false;
				}, 1000);

				// 显示广告
				this.videoAd
					.show()
					.then(() => {
						console.log("广告显示成功111");
					})
					.catch((err) => {
						console.log("广告组件出现问题", err);
						// 可以手动加载一次
						this.videoAd.load().then(() => {
							console.log("手动加载成功");
							// 加载成功后需要再显示广告
							return this.videoAd.show();
						});
					});
			},
			followAwemeUser() {
				if (this.formdata.checked) {
					tt.followAwemeUser({
						awemeId: this.formdata.advertisement,
						success: (res) => {
							console.log("引导关注抖音号成功，已关注:", res.followed);
						},
						fail: (res) => {
							console.log("引导关注抖音号失败，错误信息:", res.errMsg);
						},
					});
				}


			},
			openMapApp() {
				this.mapCtx.openMapApp({
					longitude: Number(this.arrdata.longitude),
					latitude: Number(this.arrdata.latitude),
					destination: this.arrdata.title,
					success(res) {
						console.log("拉起导航地图成功", res);
					},
					fail(err) {
						console.log("拉起导航地图失败", err);
					},
				});
			},
			isdiad() {
				this.vxshow = !this.vxshow
			},
			btn() {
				uni.switchTab({
					url: '/pages/home/home'
				})
			},
			btn1() {

			},
			bindtap(e) {
				this.interstitialAd = tt.createInterstitialAd({
					adUnitId: this.formdata.dyid,
				});

				this.interstitialAd
					.load()
					.then(() => {
						console.log("广告显示成功");
						this.interstitialAd.show();
					})
					.catch((err) => {
						console.log(err);
					});
			},
			async getbiao() {
				const {
					data: res
				} = await this.$http.post('/nav/getbiao', {})
				this.formdata = res.data
				this.videoAd = tt.createRewardedVideoAd({
					adUnitId: this.formdata.dyid
				});
				//  uni.showModal({
				// 	title: '解锁地图缩放/导航',
				// 	content: '博主不易，看个广告支持下达人，立即解锁导航！',
				// 	success: (res) =>{
				// 		if (res.confirm) {
				// 			this.showVideoAd()
				// 		} else if (res.cancel) {
				// 			console.log('用户点击取消');
				// 		}
				// 	}
				// });

			},
			async getcahlist() {
				tt.showLoading({
					title: '加载中'
				})
				const {
					data: res
				} = await this.$http.post('/nav/cahlist', {
					id: this.id
				})
				if (res.errCode == 200) {
					tt.hideLoading()
					this.arrdata = res.data
					let arr = {
						title: this.arrdata.name,
						longitude: this.arrdata.longitude,
						latitude: this.arrdata.latitude,
						alpha: 1,
						anchorX: 0.5,
						anchorY: 1,
					}
					this.markers.push(arr)
					this.circles[0].latitude = res.data.longitude
					this.circles[0].longitude = res.data.longitude
					if (this.arrdata.state == 2) {
						this.zoomshow = false
						return
					}
					if (this.arrdata.stare != 1) {
						this.zoomshow = true
						return
					}

				}
				if (res.errCode == 401) {
					this.dylogin()
				}
			},
			// navActivity(){
			//     uni.navigateTo({
			//     	url:'/pages/activityList/activityList'
			//     }) 
			// }
		},
		watch: {
			'region.latitude': function(newVal, oldVal) {
				// 监听到obj.value的变化后执行的逻辑
				console.log('obj.value发生了变化', newVal, oldVal);
			}
		}
	}
</script>

<style scoped lang="scss">
	.zoom-animation {
		animation: zoomInOut 2s infinite;
		animation-fill-mode: both;
	}

	@keyframes zoomInOut {
		0% {
			transform: scale(0.8);
		}

		50% {
			transform: scale(1);
		}

		100% {
			transform: scale(0.8);
		}
	}

	#myMap {
		height: 100vh !important;
	}

	.box {
		width: 100vw;
		height: 100vh;
		position: relative;
	}
</style>